<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <title></title>
  <link rel="stylesheet" href="./css/base.css" />
  <link rel="stylesheet" href="./css/style.css" />
  <script src="./js/flexible2.0.js"></script>
  <script src="./js/vue/vue-2.6.1.min.js"></script>
  <script src="./js/vue/axios.min.js"></script>
  <link rel="stylesheet" href="./js/nutui/nutui.css" />
  <script src="./js/nutui/nutui.js"></script>
  <script src="./js/Swiper/js/swiper.min.js"></script>
  <link rel="stylesheet" href="./js/Swiper/css/swiper.min.css" />
</head>

<body>
  <div class="container-index" id="app">
    <div class="flex flex-row items-center justify-between">
      <div class="header-logo"></div>
      <div class="color-00514a f28 mr-30 fw-600">广告</div>
    </div>
    <div class="flex justify-end px-30">
      <div class="rule-entry"></div>
    </div>
    <div class="mx-auto header-banner-txt"></div>
    <div class="header-notice flex flex-row items-center">
      <span class="pic-icon flex-shrink-0 mr-10"></span>
      <div class="notice-list flex-1 swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            SlideSlideSlideSlideSlideSlideSlideSlideSlideSlide 1
          </div>
          <div class="swiper-slide">
            SlideSlideSlideSlideSlideSlideSlideSlideSlideSlide 1
          </div>
          <div class="swiper-slide">
            SlideSlideSlideSlideSlideSlideSlideSlideSlideSlide 1
          </div>
          <div class="swiper-slide">
            SlideSlideSlideSlideSlideSlideSlideSlideSlideSlide 1
          </div>
          <div class="swiper-slide">
            SlideSlideSlideSlideSlideSlideSlideSlideSlideSlide 1
          </div>
          <div class="swiper-slide">
            SlideSlideSlideSlideSlideSlideSlideSlideSlideSlide 1
          </div>
          <div class="swiper-slide">
            SlideSlideSlideSlideSlideSlideSlideSlideSlideSlide 1
          </div>
        </div>
      </div>
    </div>
    <div class="sec-ysz-container relative">
      <div class="ysz-wan relative">
        <div class="dice-box" id="J_bowl-box">
          <div v-if="isDicesLoading" class="loading"></div>
          <div v-for="(item,index) in dices" class="dice active" :class="'dice' + (index+1)">
            <img :src="'./images/dices'+item+'.png'" />
          </div>
        </div>
      </div>
      <ul class="side-entry">
        <li @click="isShowTaskPopup = true"></li>
        <li @click="isShowCoinPopup = true"></li>
        <li>
          <a href="duiHuanJiangPinLieBiao.html" class="w-full h-full block"></a>
        </li>
        <li>
          <a href="duiHuanJiangPinLieBiao.html" class="w-full h-full block"></a>
        </li>
      </ul>
      <div class="bg-pic1"></div>
    </div>
    <div @click="isShowVoiceLanguage = true" class="sec-voice flex flex-row items-center justify-center">
      <span class="voice-icon mr-10"></span>
      <span class="f30 color-fff">{{voiceArr[voiceIndex].title}}</span>
      <span class="arrow ml-10"></span>
    </div>

    <div class="flex flex-row justify-center items-center remain-count f30 color-fff mt-20 mb-20">
      您还有 <span class="f36 px-5">10</span> 次博饼机会
      <span class="icon-tip ml-10"></span>
    </div>
    <div class="btn-startbb" @click="startDices"></div>
    <!-- 奖品一览 -->
    <div class="relative com-section-pt">
      <div class="com-section-cap cap-jpyl"></div>
      <div class="com-section-wrapper">
        <div class="com-section-inner">
          <div class="com-section-content pt-50">
            <div class="flex flex-row justify-center">
              <div class="prize-caption">博饼好“礼”</div>
            </div>
            <div class="prize-list swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide flex flex-row flex-wrap">
                  <div class="item-cell">
                    <div class="pic">
                      <img
                        src="https://cdn-oss-beijing.myckjr.com/13/resource/admin-fe_lj7l_He5ptyyTC7btsd3yxDXx.jpg?x-oss-process=style/w800" />
                    </div>
                    <p class="tit line-clamp-1">奖品名称奖品名称奖品名称</p>
                  </div>
                  <div class="item-cell">
                    <div class="pic">
                      <img
                        src="https://cdn-oss-beijing.myckjr.com/13/resource/admin-fe_lj7l_He5ptyyTC7btsd3yxDXx.jpg?x-oss-process=style/w800" />
                    </div>
                    <p class="tit line-clamp-1">奖品名称奖品名称奖品名称</p>
                  </div>
                  <div class="item-cell">
                    <div class="pic">
                      <img
                        src="https://cdn-oss-beijing.myckjr.com/13/resource/admin-fe_lj7l_He5ptyyTC7btsd3yxDXx.jpg?x-oss-process=style/w800" />
                    </div>
                    <p class="tit line-clamp-1">奖品名称奖品名称奖品名称</p>
                  </div>
                </div>
                <div class="swiper-slide flex flex-row flex-wrap">
                  <div class="item-cell">
                    <div class="pic">
                      <img
                        src="https://cdn-oss-beijing.myckjr.com/13/resource/admin-fe_lj7l_He5ptyyTC7btsd3yxDXx.jpg?x-oss-process=style/w800" />
                    </div>
                    <p class="tit line-clamp-1">奖品名称奖品名称奖品名称</p>
                  </div>
                  <div class="item-cell">
                    <div class="pic">
                      <img
                        src="https://cdn-oss-beijing.myckjr.com/13/resource/admin-fe_lj7l_He5ptyyTC7btsd3yxDXx.jpg?x-oss-process=style/w800" />
                    </div>
                    <p class="tit line-clamp-1">奖品名称奖品名称奖品名称</p>
                  </div>
                  <div class="item-cell">
                    <div class="pic">
                      <img
                        src="https://cdn-oss-beijing.myckjr.com/13/resource/admin-fe_lj7l_He5ptyyTC7btsd3yxDXx.jpg?x-oss-process=style/w800" />
                    </div>
                    <p class="tit line-clamp-1">奖品名称奖品名称奖品名称</p>
                  </div>
                </div>
              </div>
              <div class="swiper-pagination"></div>
            </div>
            <div class="flex flex-row justify-center">
              <div class="prize-caption">博饼好“券”</div>
            </div>
            <div class="prize-list swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide flex flex-row flex-wrap">
                  <div class="item-cell">
                    <div class="pic">
                      <img
                        src="https://cdn-oss-beijing.myckjr.com/13/resource/admin-fe_lj7l_He5ptyyTC7btsd3yxDXx.jpg?x-oss-process=style/w800" />
                    </div>
                    <p class="tit line-clamp-1">奖品名称奖品名称奖品名称</p>
                  </div>
                  <div class="item-cell">
                    <div class="pic">
                      <img
                        src="https://cdn-oss-beijing.myckjr.com/13/resource/admin-fe_lj7l_He5ptyyTC7btsd3yxDXx.jpg?x-oss-process=style/w800" />
                    </div>
                    <p class="tit line-clamp-1">奖品名称奖品名称奖品名称</p>
                  </div>
                  <div class="item-cell">
                    <div class="pic">
                      <img
                        src="https://cdn-oss-beijing.myckjr.com/13/resource/admin-fe_lj7l_He5ptyyTC7btsd3yxDXx.jpg?x-oss-process=style/w800" />
                    </div>
                    <p class="tit line-clamp-1">奖品名称奖品名称奖品名称</p>
                  </div>
                </div>
                <div class="swiper-slide flex flex-row flex-wrap">
                  <div class="item-cell">
                    <div class="pic">
                      <img
                        src="https://cdn-oss-beijing.myckjr.com/13/resource/admin-fe_lj7l_He5ptyyTC7btsd3yxDXx.jpg?x-oss-process=style/w800" />
                    </div>
                    <p class="tit line-clamp-1">奖品名称奖品名称奖品名称</p>
                  </div>
                  <div class="item-cell">
                    <div class="pic">
                      <img
                        src="https://cdn-oss-beijing.myckjr.com/13/resource/admin-fe_lj7l_He5ptyyTC7btsd3yxDXx.jpg?x-oss-process=style/w800" />
                    </div>
                    <p class="tit line-clamp-1">奖品名称奖品名称奖品名称</p>
                  </div>
                  <div class="item-cell">
                    <div class="pic">
                      <img
                        src="https://cdn-oss-beijing.myckjr.com/13/resource/admin-fe_lj7l_He5ptyyTC7btsd3yxDXx.jpg?x-oss-process=style/w800" />
                    </div>
                    <p class="tit line-clamp-1">奖品名称奖品名称奖品名称</p>
                  </div>
                </div>
              </div>
              <div class="swiper-pagination"></div>
            </div>

            <div class="integral-box flex flex-row justify-between">
              <div class="flex flex-row items-center f20 color-fff">
                <span class="pic-icon ml-30 mr-10"></span>可兑换幸运积分:120000
              </div>
              <a href="#" class="goto-exchange">去兑换点击查看好礼</a>
            </div>
            <p class="text-center color-4c4c4c f16 mt-10 fw-600">
              数量有限，兑完为止
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- 邀请pk入口 -->
    <div class="mx-auto invite-pk-entry"></div>
    <!-- 博饼的总次数 -->
    <div class="com-section-wrapper">
      <div class="com-section-inner">
        <div class="com-section-content mod-count">
          <div class="flex flex-row items-center px-30">
            <div class="line flex-1"></div>
            <p class="text-center flex-shrink-0 px-10 f30 fw-bold color-16463c">
              中秋博饼节
            </p>
            <div class="line flex-1"></div>
          </div>
          <div class="flex flex-row items-center px-30 f30 mt-30 pb-30 color-16463c fw-bold">
            <p>已累计博饼</p>
            <div class="total-count">0992554641</div>
            <p>次</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 博饼英雄榜 -->
    <div class="relative com-section-pt">
      <div class="com-section-cap cap-bbyxb"></div>
      <div class="com-section-wrapper">
        <div class="com-section-inner">
          <div class="com-section-content pt-60">
            <div class="flex flex-row justify-between color-16463c f36 fw-600 mx-30">
              <div>总积分:550000</div>
              <div>我的排名:6000</div>
            </div>
            <ul class="ranklist-thead px-30 mt-30 mb-10 flex flex-row f26 fw-600 color-16463c">
              <li class="w-1_6 flex-shrink-0 flex flex-row justify-center">
                排名
              </li>
              <li class="flex-1 flex flex-row justify-center px-20">昵称</li>
              <li class="w-1_3 flex-shrink-0 flex flex-row justify-center">
                总积分
              </li>
            </ul>
            <ul class="ranklist-tbody px-30">
              <li class="flex flex-row justify-around items-center color-16463c f24">
                <div class="w-1_6 flex-shrink-0 flex flex-row justify-center">
                  <div class="num">1</div>
                </div>
                <div class="flex-1 flex flex-row text-center px-20 line-clamp-1">
                  飞翔的企鹅
                </div>
                <div class="w-1_3 flex-shrink-0 flex flex-row justify-center line-clamp-1">
                  99999999999999999
                </div>
              </li>
              <li class="flex flex-row justify-around items-center color-16463c f24">
                <div class="w-1_6 flex-shrink-0 flex flex-row justify-center">
                  <div class="num">1</div>
                </div>
                <div class="flex-1 flex flex-row text-center px-20 line-clamp-1">
                  飞翔的企鹅飞翔的企鹅飞翔的企鹅
                </div>
                <div class="w-1_3 flex-shrink-0 flex flex-row justify-center">
                  9999
                </div>
              </li>
              <li class="flex flex-row justify-around items-center color-16463c f24">
                <div class="w-1_6 flex-shrink-0 flex flex-row justify-center">
                  <div class="num">1</div>
                </div>
                <div class="flex-1 flex flex-row text-center px-20 line-clamp-1">
                  飞翔的企鹅
                </div>
                <div class="w-1_3 flex-shrink-0 flex flex-row justify-center">
                  9999
                </div>
              </li>
              <li class="flex flex-row justify-around items-center color-16463c f24">
                <div class="w-1_6 flex-shrink-0 flex flex-row justify-center">
                  <div class="num">4</div>
                </div>
                <div class="flex-1 flex flex-row text-center px-20 line-clamp-1">
                  飞翔的企鹅
                </div>
                <div class="w-1_3 flex-shrink-0 flex flex-row justify-center">
                  9999
                </div>
              </li>
            </ul>
            <div class="f30 color-16463c text-center fw-600 pt-50">
              本排行榜只显示前50名
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 好运榜 -->
    <div class="relative com-section-pt">
      <div class="com-section-cap cap-hyb"></div>
      <div class="com-section-wrapper">
        <div class="com-section-inner">
          <div class="com-section-content pt-60">
            <div class="flex flex-row justify-between color-16463c f36 fw-600 mx-30">
              <div>已兑积分:550000</div>
              <div>我的排名:6000</div>
            </div>
            <ul class="ranklist-thead px-30 mt-30 mb-10 flex flex-row f26 fw-600 color-16463c">
              <li class="w-1_6 flex-shrink-0 flex flex-row justify-center">
                排名
              </li>
              <li class="flex-1 flex flex-row justify-center px-20">昵称</li>
              <li class="w-1_3 flex-shrink-0 flex flex-row justify-center">
                已兑积分
              </li>
            </ul>
            <ul class="ranklist-tbody px-30">
              <li class="flex flex-row justify-around items-center color-16463c f24">
                <div class="w-1_6 flex-shrink-0 flex flex-row justify-center">
                  <div class="num">1</div>
                </div>
                <div class="flex-1 flex flex-row text-center px-20 line-clamp-1">
                  飞翔的企鹅
                </div>
                <div class="w-1_3 flex-shrink-0 flex flex-row justify-center line-clamp-1">
                  99999999999999999
                </div>
              </li>
              <li class="flex flex-row justify-around items-center color-16463c f24">
                <div class="w-1_6 flex-shrink-0 flex flex-row justify-center">
                  <div class="num">1</div>
                </div>
                <div class="flex-1 flex flex-row text-center px-20 line-clamp-1">
                  飞翔的企鹅飞翔的企鹅飞翔的企鹅
                </div>
                <div class="w-1_3 flex-shrink-0 flex flex-row justify-center">
                  9999
                </div>
              </li>
              <li class="flex flex-row justify-around items-center color-16463c f24">
                <div class="w-1_6 flex-shrink-0 flex flex-row justify-center">
                  <div class="num">1</div>
                </div>
                <div class="flex-1 flex flex-row text-center px-20 line-clamp-1">
                  飞翔的企鹅
                </div>
                <div class="w-1_3 flex-shrink-0 flex flex-row justify-center">
                  9999
                </div>
              </li>
              <li class="flex flex-row justify-around items-center color-16463c f24">
                <div class="w-1_6 flex-shrink-0 flex flex-row justify-center">
                  <div class="num">4</div>
                </div>
                <div class="flex-1 flex flex-row text-center px-20 line-clamp-1">
                  飞翔的企鹅
                </div>
                <div class="w-1_3 flex-shrink-0 flex flex-row justify-center">
                  9999
                </div>
              </li>
            </ul>
            <div class="f30 color-16463c text-center fw-600 pt-50">
              本排行榜只显示前50名
            </div>
            <!-- <div class="flex flex-row justify-center">
              <div class="avatar">
                <img
                  src="https://cdn-oss-beijing.myckjr.com/13/resource/admin-fe_lj7l_He5ptyyTC7btsd3yxDXx.jpg?x-oss-process=style/w800" />
              </div>
              <div class="flex flex-row items-center">
                <div class="item-info">
                  <p class="color-d3a063 f24 fw-600 text-center">积分</p>
                  <p class="text-center f24 mt-10">10000</p>
                </div>
                <div class="item-info">
                  <p class="color-d3a063 f24 fw-600 text-center">我的排名</p>
                  <p class="text-center f24 mt-10">无</p>
                </div>
              </div>
            </div>
            <div class="pro-list mt-50">
              <ul>
                <li class="flex flex-row">
                  <div class="flex-1">
                    <div class="flex flex-row f26 items-center">
                      <span class="num f20">一等奖</span>第1名
                    </div>
                    <p class="f24 mt-10">
                      小米电视 大师77电视 大师77电视 大师77 一台
                    </p>
                  </div>
                  <div class="pic"><img src="./images/demo/1.png" /></div>
                </li>
                <li class="flex flex-row">
                  <div class="flex-1">
                    <div class="flex flex-row f26 items-center">
                      <span class="num f20">二等奖</span>第1名
                    </div>
                    <p class="f24 mt-10">
                      小米电视 大师77电视 大师77电视 大师77 一台
                    </p>
                  </div>
                  <div class="pic">
                    <img
                      src="https://cdn-oss-beijing.myckjr.com/13/resource/admin-fe_lj7l_He5ptyyTC7btsd3yxDXx.jpg?x-oss-process=style/w800" />
                  </div>
                </li>
              </ul>
              <p class="color-16463c f32 text-center fw-bold mt-10">本排行榜只显示前50名</p>
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <audio :src="voiceArr[0].src" preload ref="diceAudio0"></audio>
    <audio :src="voiceArr[1].src" preload ref="diceAudio1"></audio>
    <!-- 博饼语言切换 -->
    <nut-popup v-model="isShowVoiceLanguage" position="bottom" class="vocie-popup">
      <ul>
        <li v-for="(item,index) in voiceArr" @click="chooseVoice(index)" :class="index==voiceIndex ? 'active':''">
          {{item.title}}
        </li>
      </ul>
    </nut-popup>
    <!-- 任务中心 -->
    <nut-popup v-model="isShowTaskPopup" position="bottom" class="popup-task flex flex-col">
      <div class="caption"></div>
      <div class="task-wrapper flex-1 flex flex-col overflow-hidden">
        <div class="task-inner flex-1 flex flex-col overflow-hidden">
          <p class="color-fde0b2 text-center f20 mt-30 pb-20">
            做任务得博饼次数
          </p>
          <div class="flex-1 flex-shrink-0 overflow-y-scroll">
            <ul class="task-list">
              <li class="flex flex-row items-center">
                <div class="icon-pic pic-wx flex-shrink-0"></div>
                <div class="overflow-hidden flex-1 px-20">
                  <div class="flex flex-row items-center color-16463c f20">
                    <p class="f30 fw-600 mr-10">浏览任务</p>
                    <p class="bg-2c867b radius-10 px-5 py-5 color-fff">
                      一次性任务
                    </p>
                  </div>
                  <p class="color-16463c f20 mt-10">
                    关注[xxxx] 公众号，回复中秋博饼节
                  </p>
                </div>
                <div class="flex-shrink-0 flex flex-col justify-center">
                  <a href="#" class="handler-btn">去完成</a>
                  <div class="f20 color-16463c mt-10">已完成0/1</div>
                </div>
              </li>
              <li class="flex flex-row items-center">
                <div class="icon-pic flex-shrink-0"></div>
                <div class="overflow-hidden flex-1 px-20">
                  <div class="flex flex-row items-center color-16463c f20">
                    <p class="f30 fw-600 mr-10">浏览任务</p>
                    <p class="bg-2c867b radius-10 px-5 py-5 color-fff">
                      一次性任务
                    </p>
                  </div>
                  <p class="color-16463c f20 mt-10">
                    关注[xxxx] 公众号，回复中秋博饼节
                  </p>
                </div>
                <div class="flex-shrink-0 flex flex-col justify-center">
                  <a href="#" class="handler-btn">去完成</a>
                  <div class="f20 color-16463c mt-10">已完成0/1</div>
                </div>
              </li>
              <li class="flex flex-row items-center">
                <div class="icon-pic flex-shrink-0"></div>
                <div class="overflow-hidden flex-1 px-20">
                  <div class="flex flex-row items-center color-16463c f20">
                    <p class="f30 fw-600 mr-10">浏览任务</p>
                    <p class="bg-2c867b radius-10 px-5 py-5 color-fff">
                      一次性任务
                    </p>
                  </div>
                  <p class="color-16463c f20 mt-10">
                    关注[xxxx] 公众号，回复中秋博饼节
                  </p>
                </div>
                <div class="flex-shrink-0 flex flex-col justify-center">
                  <a href="#" class="handler-btn">去完成</a>
                  <div class="f20 color-16463c mt-10">已完成0/1</div>
                </div>
              </li>
              <li class="flex flex-row items-center">
                <div class="icon-pic flex-shrink-0"></div>
                <div class="overflow-hidden flex-1 px-20">
                  <div class="flex flex-row items-center color-16463c f20">
                    <p class="f30 fw-600 mr-10">浏览任务</p>
                    <p class="bg-2c867b radius-10 px-5 py-5 color-fff">
                      一次性任务
                    </p>
                  </div>
                  <p class="color-16463c f20 mt-10">
                    关注[xxxx] 公众号，回复中秋博饼节
                  </p>
                </div>
                <div class="flex-shrink-0 flex flex-col justify-center">
                  <a href="#" class="handler-btn">去完成</a>
                  <div class="f20 color-16463c mt-10">已完成0/1</div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </nut-popup>
    <!-- 数字币体验次数 -->
    <nut-popup v-model="isShowCoinPopup" position="center" class="popup-digital">
      <div class="digital-wrapper color-fde0b2 text-center">
        <p class="f50">数币GO博饼机会</p>
        <p class="f34 mt-10">每人每日允许支付一次</p>
        <div class="handler-btn">充1分得三次机会</div>
        <div @click="isShowCoinPopup = false" class="handler-close"></div>
      </div>
    </nut-popup>
    <!--  -->
    <nut-dialog title="" :visible="isShowRedirectConfirm" @ok-btn-click="redirectConfirm"
      @cancel-btn-click="dialogShow=false" @close="dialogShow=false">
      <p class="text-center fw-600 f36 mb-20">免责提示</p>
      <div class="leading-normal f32 text-left">
        您即将跳转至第三方页面，该页面由厦门指尖时光信息科技有限公司提供。在第三方页面中提交信息将由第三方按照其隐私政策及服务协议执行并负责，服务及责任均由第三方提供或承担，如有疑问请致电其服务电话:18050108161(法定工作日9:00-18:00)
      </div>
      <div class="text-left mt-20">
        <nut-checkbox v-model="redirectRadioVal"><span class="f32">跳转此服务后15天内不再提示</span></nut-checkbox>
      </div>
    </nut-dialog>
    <!-- 摇骰子结果提示框 -->
    <nut-popup v-model="isShowYszResult" position="center" class="popup-ysz-result">
      <div class="flex flex-row justify-end">
        <div class="close-pic" @click="isShowYszResult = false"></div>
      </div>
      <div class="soma-mid">
        <div class="soma-body text-center fw-bold">
          <!-- 没有次数的时候 -->
          <p class="fw-bold">没有博饼次数了哦~</p>
          <!-- 没有中奖的时候 -->
          <p class="mt-30">福利在靠近!</p>
          <p>再来一把运气加倍!</p>
          <!-- 中奖的时候 -->
          <!-- <p>哇塞！中状元了！</p>
            <p>获得200积分</p> -->
          <div class="wan">
            <div class="result-dice-box">
              <div v-for="(item,index) in dices" class="dice" :class="'dice' + (index+1)">
                <img :src="'./images/dices_s'+item+'.png'" />
              </div>
            </div>
          </div>
        </div>
        <div class="pic-1"></div>
      </div>
      <div class="flex flex-row justify-center mt-30">
        <a class="handle-btn">再来一把</a>
        <a class="handle-btn">分享助力</a>
      </div>
    </nut-popup>
  </div>
  <!-- 声音 start -->
  <script src="./js/index.js"></script>
</body>

</html>